<!-- 简易图表 -->

<template>
  <div ref="chart" :class="className" />
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixPath from '../mixPath'
import * as echarts from 'echarts'

const name = 'EasyChart'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      chart: null,
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 样式类
     */
    className: mixPath.computed.className,
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听基础配置
     */
    baseOption() {
      const { chart, baseOption } = this
      chart && !CORE.isEmpty(baseOption) && chart.setOption(baseOption, true) // true 表示不合并
    },

    /**
     * 监听动态配置
     */
    option() {
      const { chart, option } = this
      chart && !CORE.isEmpty(option) && chart.setOption(option) // 合并
    },
  },

  /**
   * 挂载完成 (先抽取再调用) (此组件中不抽取，以免成为对外接口)
   */
  mounted() {
    // 初始化
    const { $refs, baseOption, option, theme } = this
    const chart = echarts.init($refs.chart, theme)
    this.chart = chart

    // 设置配置
    chart.setOption(baseOption)
    !CORE.isEmpty(option) && chart.setOption(option)

    // 绑定事件
    const { onClick, onDbClick, onHighlight, onDownplay, onSelect, onLegend } = this
    if (onClick) chart.on('click', (params) => onClick(params))
    if (onDbClick) chart.on('dblclick', (params) => onDbClick(params))
    if (onHighlight) chart.on('highlight', (params) => onHighlight(params))
    if (onDownplay) chart.on('downplay', (params) => onDownplay(params))
    if (onSelect) chart.on('selectchanged', (params) => onSelect(params))
    if (onLegend) chart.on('legendunselected', (params) => onLegend(params))

    window.addEventListener('resize', chart.resize)
  },

  /**
   * 销毁之前 (先抽取再调用)
   */
  beforeDestroy() {
    const { chart } = this
    window.removeEventListener('resize', chart.resize)
    chart.dispose()
  },

  /**
   * 本地方法 (轻量重要在前) (全部对外提供，可被调用)
   */
  methods: {
    /**
     * 高亮
     */
    highlight(config) {
      this.chart.dispatchAction({ ...config, type: 'highlight' })
    },

    /**
     * 熄灭
     */
    downplay(config) {
      this.chart.dispatchAction({ ...config, type: 'downplay' })
    },

    /**
     * 设置选中
     */
    select(config) {
      this.chart.dispatchAction({ ...config, type: 'select' })
    },

    /**
     * 取消选中
     */
    unselect(config) {
      this.chart.dispatchAction({ ...config, type: 'unselect' })
    },

    /**
     * 切换选中
     */
    toggleSelected(config) {
      this.chart.dispatchAction({ ...config, type: 'toggleSelected' })
    },

    /**
     * 图例设置选中
     */
    legendSelect(name) {
      this.chart.dispatchAction({ name, type: 'legendSelect' })
    },

    /**
     * 图例取消选中
     */
    legendUnSelect(name) {
      this.chart.dispatchAction({ name, type: 'legendUnSelect' })
    },

    /**
     * 图例切换选中
     */
    legendToggleSelect(name) {
      this.chart.dispatchAction({ name, type: 'legendToggleSelect' })
    },

    /**
     * 图例全部选中
     */
    legendAllSelect() {
      this.chart.dispatchAction({ type: 'legendAllSelect' })
    },

    /**
     * 图例全部反选
     */
    legendInverseSelect() {
      this.chart.dispatchAction({ type: 'legendInverseSelect' })
    },
  },
}
</script>
